<template>
    <div>
    <!--分类-->
    <el-form :inline="true" class="demo-form-inline">
        <!-- 一级分类 -->
        {{category1Id}} === {{category2Id}}==={{category3Id}}
        <br>
        <el-form-item label="一级分类">
        <el-select
            v-model="category1Id"
            placeholder="请选择"
            @change="category1Changed">
            <el-option
            v-for="category in categoryList1"
            :key="category.id"
            :label="category.name"
            :value="category.id"/>
        </el-select>
        </el-form-item>

        <!-- 二级分类 -->
        <el-form-item label="二级分类">
        <el-select
            v-model="category2Id"
            placeholder="请选择"
            @change="category2Changed">
            <el-option
            v-for="category in categoryList2"
            :key="category.id"
            :label="category.name"
            :value="category.id"/>
        </el-select>
        </el-form-item>

        <!-- 三级分类 -->
        <el-form-item label="三级分类">
        <el-select
            v-model="category3Id"
            placeholder="请选择"
            @change="category3Changed">
            <el-option
            v-for="category in categoryList3"
            :key="category.id"
            :label="category.name"
            :value="category.id"/>
        </el-select>
        </el-form-item>
    </el-form>

    <!--属性列表-->
    <div v-show="!showAttrInfoForm">
        {{attrInfoList}}
         <br>
      <div style="margin-bottom:10px;">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="addAttrInfo()">添加平台属性</el-button>
      </div>

      <el-table
        :data="attrInfoList"
        border
        fit
        highlight-current-row>
        <el-table-column align="center" label="序号" width="100">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="属性id" width="100">
          <template slot-scope="scope">
            {{ scope.row.id }}
          </template>
        </el-table-column>
        <el-table-column label="属性名称" width="200">
          <template slot-scope="scope">
            <span>{{ scope.row.attrName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="属性值">
          <template slot-scope="scope">
            <span><span>{{ scope.row.attrValueList.map(a=>{return a.valueName}).join("/") }}</span></span>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button v-if="categoryLevel == scope.row.categoryLevel" type="primary" 
                size="mini" icon="el-icon-edit" @click="editAttrInfoById(scope.row.id, scope.row.attrName)">修改</el-button>
                <el-button v-if="categoryLevel == scope.row.categoryLevel" type="danger" 
                size="mini" icon="el-icon-edit" @click="deleteAttrInfoById(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>


    <!--属性表单-->
    <el-form v-show="showAttrInfoForm" :model="attrInfoForm" :inline="true" class="demo-form-inline">

    {{attrInfoForm}}
      <el-form-item label="属性名称">
        <el-input v-model="attrInfoForm.attrName"/>
      </el-form-item>

      <div style="margin-bottom:10px;">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="addAttrValue()">添加属性值</el-button>

      </div>
      <div>
        <el-table
          :data="attrInfoForm.attrValueList"
          element-loading-text="数据正在加载......"
          border
          fit
          highlight-current-row>
          <el-table-column align="center" label="序号" width="100">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="属性值id" width="100">
            <template slot-scope="scope">
              {{ scope.row.id }}
            </template>
          </el-table-column>
          <el-table-column label="属性值名称">
            <!-- <template slot-scope="scope">
              <span>{{ scope.row.valueName }}</span>
            </template> -->
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.valueName"
                class="edit-input"
                size="mini" />
            </template>
          </el-table-column>

          <el-table-column label="操作" width="200" align="center">
            <template slot-scope="scope">
              <el-button type="danger" size="mini" icon="el-icon-edit" @click="deleteAttrValueByName(scope.row.valueName)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!--查询按钮-->
      <div style="margin-top:22px;">
        <el-button type="primary" size="mini" @click="saveAttrInfo()">保存</el-button>
        <el-button type="default" size="mini" @click="backToAttrList()">返回</el-button>
      </div>
    </el-form>


    </div>
</template>
<script>
import categoryApi from '../../api/product/category.js'
import attrApi from '../../api/product/attr.js' 
export default {
    data(){
        return{
            valueName:'',
            categoryList1:[],
            categoryList2:[],
            categoryList3:[],
            category1Id:'',//当前选择的一级分类
            category2Id:'',
            category3Id:'',
            //以上是分类
            attrInfoList:[],
            //以上是列表展示
            showAttrInfoForm:false,
            categoryLevel:null,//指示显示修改按钮
            attrInfoForm:{
                attrName:'',
                attrValueList:[],
                categoryId:'',//当前分类ID
                categoryLevel:''//当前分类级别
            },//pojo
            url:''
        }
    },
    methods:{
        getCategory1(){
            categoryApi.getCategory1().then(res=>{
                this.categoryList1 = res.data.data;
            })
        },
        getCategory2(category1Id){
            categoryApi.getCategory2(category1Id).then(res=>{
                this.categoryList2 = res.data.data;
            })
        },
        getCategory3(category2Id){
            categoryApi.getCategory3(category2Id).then(res=>{
                this.categoryList3 = res.data.data;
            })
        },
        category1Changed(){
            this.category2Id=''
            this.categoryList2=[]
             this.categoryList3=[]
            this.attrInfoForm.categoryId = this.category1Id;
            this.attrInfoForm.categoryLevel = 1;

            this.categoryLevel = 1;
            this.getCategory2(this.category1Id);
            this.getAttrInfoList();
            
        },
        category2Changed(){
            debugger
            this.category3Id=''
            this.categoryList3=[]
            this.attrInfoForm.categoryId = this.category2Id;
            this.attrInfoForm.categoryLevel = 2;
            this.categoryLevel = 2;
            this.getCategory3(this.category2Id);
            this.getAttrInfoList();
        },
        category3Changed(){
            debugger
            this.attrInfoForm.categoryId = this.category3Id;
            this.attrInfoForm.categoryLevel = 3;
            this.categoryLevel = 3;
            this.getAttrInfoList();
        },
        getAttrInfoList(){
            attrApi.getAttrInfoList(this.category1Id,this.category2Id,this.category3Id)
            .then(res=>{
                if(res.data.ok){
                    this.attrInfoList = res.data.data;
                }
            })
        },
        //添加
        addAttrInfo(){
            this.showAttrInfoForm = true;
            this.attrInfoForm.attrName =''
            this.attrInfoForm.attrValueList=[]
        },
        editAttrInfoById(attrId,attrName){
            this.showAttrInfoForm = true;
            this.attrInfoForm.id = attrId
             this.attrInfoForm.attrName =attrName

             attrApi.getAttrValueList(attrId).then(res=>{
                 if(res.data.ok){
                     this.attrInfoForm.attrValueList = res.data.data;
                 }
             })
        },
        deleteAttrInfoById(attrId){
             attrApi.deleteAttrInfo(attrId).then(res=>{
                 alert(res.data.message)
             })
        },
        backToAttrList(){
            this.showAttrInfoForm = false;
        },
        addAttrValue(){
            this.attrInfoForm.attrValueList.push({});
        },
        deleteAttrValueByName(valueName){
            this.attrInfoForm.attrValueList
                =this.attrInfoForm.attrValueList.filter((a)=>{return a.valueName!==valueName});
        },
        saveAttrInfo(){
            attrApi.saveAttrInfo(this.attrInfoForm).then(res=>{
                alert(res.data.message)
            })
        }
    },
    mounted(){
        this.getCategory1();
        this.url = "data:image/png;base64," + "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";
    }
}
</script>
<style>
.edit-input {
  padding-right: 60px;
}
.save-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>


